// 添加医院设置和修改医院设置是同一个组件

import React, { useEffect } from 'react'
import { Card, Form, Input, Button, message } from 'antd'
import { useNavigate, useParams } from 'react-router-dom'

// 引入发送请求的方法
import {
  reqAddHospitalSet,
  reqGetHospitalSet,
  reqUpdateHospitalSet,
} from '@api/hospital/hospitalSet'

export default function AddOrUpdateHospitalSet() {
  const navigate = useNavigate()
  const [form] = Form.useForm() // 返回form实例
  const { id } = useParams() // 获取修改传递过来的id
  //   console.log(id)

  // 组件挂载的时候,如果是修改就获取当前医院设置的数据
  useEffect(() => {
    async function fetch() {
      // 如果id有值,则这次是修改,就需要发送请求获取当前数据
      if (id) {
        const result = await reqGetHospitalSet(id)
        // console.log(result)
        // 将获取到的数据,设置到表单中
        form.setFieldsValue(result) // 将响应的数据,直接添加到表单中
      }
    }
    fetch()
  }, [])

  // 点击保存按钮,表单校验通过之后,触发的函数
  const onFinish = async (values: any) => {
    // 由于添加和修改是同一个组件,保存按钮既可能是添加也可能是修改. 添加和修改都要写在在这个函数体中

    // 判断是修改的依据是什么? 就是id是否有值
    if (id) {
      // 修改
      // 注意: 修改时,需要上传要修改的数据的id
      values.id = id
      await reqUpdateHospitalSet(values)
      // 提示用户
      message.success('修改成功')
    } else {
      // 添加
      // 发送请求,添加医院设置
      await reqAddHospitalSet(values)

      // 提示用户
      message.success('添加成功')
    }
    // 回到医院设置页面
    navigate('/syt/hospital/hospitalSet')
  }

  return (
    <Card>
      <Form
        form={form} // form实例和当前Form表单绑定
        name="basic"
        labelCol={{ span: 2 }}
        wrapperCol={{ span: 22 }}
        initialValues={{ remember: true }}
        onFinish={onFinish}
        autoComplete="off"
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{ required: true, message: '请输入医院名称' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{ required: true, message: '请输入医院编号' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{ required: true, message: '请输入api基础路径' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{ required: true, message: '请输入联系人姓名' }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[
            {
              required: true,
              message: '请输入联系人手机',
              pattern: /^1[3-9]\d{9}$/, // 通过正则校验是否是手机号
            },
          ]}
        >
          <Input />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 2, span: 16 }}>
          <Button type="primary" htmlType="submit" style={{ marginRight: 10 }}>
            保存
          </Button>
          <Button
            type="default"
            onClick={() => {
              navigate(-1)
            }}
          >
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  )
}
